<template>
	<div class="monthlyCard">
		<el-form :model="searchData">
		    <el-form-item label="" class="form_date">
		        <el-date-picker v-model="searchData.time" @change="handleChange" type="daterange" value-format="yyyy-MM-dd" range-separator="至" start-placeholder="开始日期"  end-placeholder="结束日期">
		        </el-date-picker>
		    </el-form-item>
	    </el-form>

		<div>
			<span class="totalRevenue">月卡总收益：<span class="revenue">{{totalRevenue}} 元</span></span>
		</div>
	    <el-table :data="tableData" style="width: 100%">
	      <el-table-column prop="carCardNum" label="车牌号" align="center">
	      </el-table-column>
	      <el-table-column prop="amount" label="支付金额" align="center">
	      </el-table-column>
	      <el-table-column label="类型" align="center">
	      	<template slot-scope="scope">
                <span>{{ scope.row.payType | payTypeFilter }}</span>
        	</template>
	      </el-table-column>
	      <el-table-column prop="ruleName" label="充值规则" align="center">
	      </el-table-column>
	      <!-- <el-table-column prop="rechargeCost" label="充值金额（元）" align="center"> -->
	      </el-table-column>
	      <el-table-column prop="mobilePhone" label="手机号码" align="center">
	      </el-table-column>
	      
	      <el-table-column prop="buyTime" label="购买时间" align="center">
	      </el-table-column>
	    </el-table>

	    <!-- 分页 -->
	    <el-pagination layout="total, sizes, prev, pager, next, jumper" :total="tal" :hide-on-single-page="false" background :page-size="10" :page-sizes="[5,8,10]" align="center" @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page.sync="currentPage" style="margin-top:30px;">
	    </el-pagination>
	</div>
</template>

<script>
	import axios from 'axios'
	import qs from 'qs'


	export default {
		name:'monthlyCard',
		filters: {
		    payTypeFilter(payType) {
		      if (payType == 0) {
		        return '微信支付'
		      }
		      if (payType == 1) {
		        return '支付宝支付'
		      }
		      if (payType == 2){
		      	return '时长支付'
		      }
		      if (payType == 3){
		      	return '月租卡支付'
		      }
		      if (payType == 4){
		      	return '其他支付'
		      }
		    }
		},
		data() {
			return {
				tableData:[],
				searchData: {
					isLine:0,
          pageSize: 10,
          page: 1,
				},
				totalRevenue:0,
				
				tal:null,
				currentPage: 1
			}
		},
		mounted(){
			this.getTableData();
			this.getTotalRevenue();
		},
		methods: {
			getTotalRevenue(){
				axios({
					method: 'post',
					url: 'api/bParkingleaserecord/sumAmount',
					data: qs.stringify(this.searchData)
				}).then((res) => {
					if ( res.data.status == 200 ) {
						this.totalRevenue = res.data.data;
					} else {
						this.totalRevenue = 0;
					}
				})
			},
			getTableData(){
				axios({
					method: 'post',
					url: 'api/bParkingleaserecord/selectRecordByManage',
					data:qs.stringify(this.searchData)
				}).then((res) => {
					this.tableData = res.data.data.list;
					this.tal = res.data.data.total;
				})
			},
			//分页修改每页显示条数
		    handleSizeChange(val){
			    this.searchData.pageSize = val;
			    this.getTableData();
		    },
		    //分页跳转页面
		    handleCurrentChange(val){
			    this.searchData.page = val;
			    this.getTableData();
		    },
		    handleChange(e) {
		        if (e != null){
		          this.searchData.buyStart = e[0];
		          this.searchData.buyEnd = e[1];
		        } else {
		          this.searchData.buyStart = '';
		          this.searchData.buyEnd = '';
		        }
            this.searchData.page = 1;
		        this.getTableData();
		        this.getTotalRevenue();
		    }
		}
	}

</script>

<style scoped>
	.totalRevenue{
		float: right;
		padding: 20px;
		font-weight: bolder;
		color: #1890ff;
		margin-right: 80px;
	}
	.revenue{
		color: #f40;
		font-size:20px;
		margin-left: 8px;
	}
	.form_date {
	    display: inline-block;
	    margin-right: 20px;
	}



</style>